<template>
	<div>
		<el-card>
			<el-table :data="allRoles" border style="width: 100%;">
				<el-table-column width="120" type="index" :label="$t('msg.role.index')"></el-table-column>
				<el-table-column :label="$t('msg.role.name')" prop="title"></el-table-column>
				<el-table-column :label="$t('msg.role.desc')" prop="describe"></el-table-column>
				<el-table-column :label="$t('msg.role.action')" width="200" #default="{row}">
					<el-button v-permission="['distributePermission']" type="primary" size="small"
						@click="onDistributePermissionClick(row)">
						{{$t('msg.role.assignPermissions')}}
					</el-button>
				</el-table-column>
			</el-table>
		</el-card>

		<distribute-permission v-model="distributePermissionVisible" :roleId="selectRoleId"></distribute-permission>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		roleList
	} from '@/api/role'
	import {
		watchSwitchLang
	} from '@/utils/i18n'
	import DistributePermission from './components/DistributePermission.vue'

	const allRoles = ref([])

	const getRoleList = async () => {
		allRoles.value = await roleList()
	}
	getRoleList()
	watchSwitchLang(getRoleList)

	const distributePermissionVisible = ref(false)
	const selectRoleId = ref('')
	const onDistributePermissionClick = row => {
		distributePermissionVisible.value = true
		selectRoleId.value = row.id
	}
</script>

<style lang="scss" scoped>
</style>
